<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./sass/cart.css">
    <link rel="stylesheet" href="./sass/index.css">
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2708812_d1142so2yne.css">
</head>

<body>
    <div class="cart">
        <header class="head">
            <div class="con_head">
                <a href="./index.html"><img src="./images/logo-mi2.png" alt=""></a>
                <span>我的购物车</span>
                <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
                <div class="login_h">
                    <div class="qdl">
                        <a href="./login.html" class="log">登录</a>
                        <a href="./register.html" class="reg">|&emsp;注册</a>
                    </div>
                    <p class="hyd">欢迎用户:&emsp;<a class="yhu"></a></p>
                </div>
            </div>

        </header>

        <div class="main">
            <!-- <p class="cd">还需 <span>49.00</span> 元可免运费&emsp;<a href="">去凑单 ></a></p> -->
            <div class="con_cart">
                <ol>
                    <li class="checkall"><input type="checkbox" class="checkall_">全选</li>
                    <li class="title">商品名称</li>
                    <li class="price">单价</li>
                    <li class="num">数量</li>
                    <li class="total">小计</li>
                    <li class="operation">操作</li>
                </ol>
                <div class="box">
                    <!-- <ul>
                    <li class="check"><input type="checkbox"></li>
                    <li class="img_t"><img src="./images/pc_1.jpg" alt=""></li>
                    <li class="title">小米结婚登记上飞机收</li>
                    <li class="price">9.99元</li>
                    <li class="num">
                        <div class="num_jj">
                            <button class="reduce">-</button>
                            <input class="count-input" type="text" value="1" />
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="total">10元</li>
                    <li class="operation">X</li>
                </ul> -->
                </div>

            </div>

            <!-- //结算 -->
            <div class="settlement">
                <a href="">继续购物</a>
                <span class="sep">|</span>
                <p class="total_g">已选择<span class="total_j"></span>件商品</p>
                <p style="color: #ff6700;">合计:&emsp;<span class="total_num">0</span>元</p>
                <button>去结算</button>
            </div>
        </div>

        <div class="kkry">
            <img src="./images/cart-empty.png" alt="">
            <h2>购物车空空如也</h2><a href="http://127.0.0.1/mi/%E5%B0%8F%E7%B1%B3/list.html">去购物></a>
        </div>

        <!-- 尾部 -->
        <footer class="footer w">
            <div class="sales">
                <a href="#"><i></i>预约维修服务</a>
                <a href="#"><i></i>7天无理由退货</a>
                <a href="#"><i></i>15天免费换货</a>
                <a href="#"><i></i>满150元包邮</a>
                <a href="#"><i></i>520家售后网点</a>
            </div>
            <div class="dibu">
                <div class="d_nav l">
                    <ul>
                        <li>
                            <a href="#" class="title">帮助中心</a>
                            <a href="#">账户管理</a>
                            <a href="#">购物指南</a>
                            <a href="#">订单操作</a>
                        </li>
                        <li>
                            <a href="#" class="title">帮助中心</a>
                            <a href="#">账户管理</a>
                            <a href="#">购物指南</a>
                            <a href="#">订单操作</a>
                        </li>
                        <li>
                            <a href="#" class="title">帮助中心</a>
                            <a href="#">账户管理</a>
                            <a href="#">购物指南</a>
                            <a href="#">订单操作</a>
                        </li>
                        <li>
                            <a href="#" class="title">帮助中心</a>
                            <a href="#">账户管理</a>
                            <a href="#">购物指南</a>
                            <a href="#">订单操作</a>
                        </li>
                        <li>
                            <a href="#" class="title">帮助中心</a>
                            <a href="#">账户管理</a>
                            <a href="#">购物指南</a>
                            <a href="#">订单操作</a>
                        </li>
                        <li>
                            <a href="#" class="title">帮助中心</a>
                            <a href="#">账户管理</a>
                            <a href="#">购物指南</a>
                            <a href="#">订单操作</a>
                        </li>
                    </ul>
                </div>
                <div class="tel l">
                    <p>400-100-5678</p>
                    <p>周一至周五8:00-16:00</p>
                    <p>(仅收市话费)</p>
                    <span><i></i>小时在线客服</span>
                </div>
            </div>
        </footer>
        <div class="copyright">
            <div class="copy w">
                <div class="copy_logo l clearfix">
                    <img src="./images/logo-mi2.png" alt="">
                </div>
                <div class="copy_nav l clearfix">
                    <a href="#">小米商城</a><span class="seb">|</span>
                    <a href="#">MIUI</a><span class="seb">|</span>
                    <a href="#">米家</a><span class="seb">|</span>
                    <a href="#">米聊</a><span class="seb">|</span>
                    <a href="#">多看</a><span class="seb">|</span>
                    <a href="#">游戏</a><span class="seb">|</span>
                    <a href="#">政企服务</a><span class="seb">|</span>
                    <a href="#">小米天猫店</a><span class="seb">|</span>
                    <a href="#">小米集团隐私政策</a><span class="seb">|</span>
                    <a href="#">小米公司儿童信息保护规则</a><span class="seb">|</span>
                    <a href="#">小米商城用户协议</a><span class="seb">|</span>
                    <a href="#">问题反馈</a>
                    <span class="seb"> |</span>
                    <a href="#">Select Location</a>
                    <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                        （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                        增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
                        违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

                </div>
            </div>
            <p class="copy_p">探索黑科技,小米为发烧而生!</p>

        </div>
    </div>

    <!-- 侧边导航 -->
    <div class="c_nav_f">
        <a href="">
            <i class="iconfont icon-gerenzhongxin"></i>
            <span>个人中心</span>
        </a>
        <a href="./list.html">
            <i class="iconfont icon-shangpin"></i>
            <span>全部商品</span>
        </a>
        <a href="./cart.html">
            <i class="iconfont icon-iconfonticonfontcart"></i>
            <span>购物车</span>
        </a>
        <a href="./login.html">
            <i class="iconfont icon-denglu"></i>
            <span>登录/注册</span>
        </a>
    </div>
</body>
<script src="./js/tool_ajax.js"></script>
<script src="./js/api.js"></script>
<script>
    var ones = '';

    // 拿到用户名
    const user = localStorage.getItem('login_user');
    if (user) {

        ones = document.querySelectorAll('.check_one');

        $('.yhu').innerHTML = user;
        $('.qdl').style.display = "none";
        $('.hyd').style.display = "block";
        fn();

        async function fn() {
            ones = document.querySelectorAll('.check_one');
            const res = await cart({
                username: user
            })
            console.log(res);
            const {
                status,
                msg,
                data
            } = res;
            if (status) {
                //显示购物车
                $('.main').style.display = 'block';
                let html = '';
                data.forEach(v => {

                    html += `
                    <ul data-id="${v.id}">
                    <li class="check">
                        <input type="checkbox" class="check_one">
                    </li>
                    <li class="img_t"><img src="${v.img}" alt=""></li>
                    <li class="title">${v.title}</li>
                    <li class="price">${v.price}</li>
                    <li class="num">
                        <div class="num_jj">
                            <button class="reduce">${v.num > 1 ? '-' : ''}</button>
                            <input class="count-input" type="text" value="${v.num}" />
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="total">${v.num * v.price}</li>
                    <li class="operation">删除</li>
                </ul>
                    `
                })
                $('.box').innerHTML = html;
                ones = document.querySelectorAll('.check_one');
            } else {
                // 做一个跳转 --- 商品列表
                $('.kkry').style.display = 'block';
            }
        }




    } else {
        // 创建的是一个标签对象
        const h2 = document.createElement('h2');
        h2.innerHTML = '你还没有登录';
        document.body.appendChild(h2);
    }

    //事件委托
    document.onclick = async function (e) {
        ones = document.querySelectorAll('.check_one');
        const target = e.target;

        //单删除
        if (target.className === 'operation') {
            const id = target.parentNode.getAttribute('data-id')

            const res = await del({
                username: user,
                id
            })
            console.log(res);
            const {
                status,
                msg
            } = res;
            if (status) {
                target.parentNode.remove();
                ones = document.querySelectorAll('.check_one');
                console.log(ones);

                for (var i = 0; i < ones.length; i++) {
                    if (!ones[i].checked) {
                        break;
                    }
                }
                $('.checkall_').checked = i === ones.length;
                total()

            } else {
                alert(msg)
            }






        }

        //数量+
        if (target.className === 'add') {
            const goods_id = target.parentNode.parentNode.parentNode.getAttribute('data-id');
            const res = await addToCart({
                username: user,
                goods_id,
                num: 1
            })
            console.log(res);
            const {
                status,
                msg
            } = res;
            if (status) {
                // 数量
                target.previousElementSibling.value++;
                // 总价
                target.parentNode.parentNode.nextElementSibling.innerHTML = target.previousElementSibling
                    .value * 1 * target.parentNode.parentNode.previousElementSibling.innerHTML * 1
                // // 判断能不能加
                if (!target.previousElementSibling.previousElementSibling.innerHTML) {
                    target.previousElementSibling.previousElementSibling.innerHTML = '-';
                }

            } else {
                alert(msg)
            }
            total()
        }

        //数量-
        if (target.className === 'reduce') {
            const goods_id = target.parentNode.parentNode.parentNode.getAttribute('data-id');
            const res = await addToCart({
                username: user,
                goods_id,
                num: -1
            })
            console.log(res);
            const {
                status,
                msg
            } = res;
            if (status) {
                // 数量
                target.nextElementSibling.value--;
                // 总价
                target.parentNode.parentNode.nextElementSibling.innerHTML = target.nextElementSibling.value *
                    target.parentNode.parentNode.previousElementSibling.innerHTML * 1
                // 判断能不能减
                if (target.nextElementSibling.value == 1) {
                    target.innerHTML = ""
                }

            } else {
                alert(msg)
            }
            total()
        }
        //全选
        if (target.className === 'checkall_') {

            ones.forEach(v => {
                v.checked = target.checked
            })
            total()
        }

        // 反选
        if (target.className === 'check_one') {
            for (var i = 0; i < ones.length; i++) {
                if (!ones[i].checked) {
                    break;
                }
            }
            $('.checkall_').checked = i === ones.length;
            total()
        }
    }




    //总计
    function total() {
        let count = 0;
        let money = 0;
        for (var i = 0; i < ones.length; i++) {
            if (ones[i].checked) {
                count += ones[i].parentNode.parentNode.querySelector('.count-input').value * 1;
                money += ones[i].parentNode.parentNode.querySelector('.total').innerHTML * 1;
            }
        }
        $('.total_j').innerHTML = count;
        $('.total_num').innerHTML = money;
    }
</script>

</html>